<template>
	<view style="padding: 10px;">
		<view style="font-size: 60rpx;font-weight: bolder; text-align: center;margin: 30px 0px;">粮食收购系统</view>
		<u-form :model="form" ref="loginForm">
			<u-form-item label="用户名" label-width="120" prop="username">
				<u-input v-model="form.username" type="text" />
			</u-form-item>
			<u-form-item label="密码" label-width="120" prop="password">
				<u-input v-model="form.password" type="password" />
			</u-form-item>
			<u-form-item label="验证码" label-width="120" prop="code">
				<u-input v-model="form.code" type="text" />
				<u-image width="210rpx" height="78rpx" :src="codeUrl" @click="getCheckCode"></u-image>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">登录</u-button>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getCodeImg,
		login,
		getInfo
	} from "@/api/login";
	import {
		getToken,
		setToken
	} from 'utils/tokenManager.js'
	import {
		getUserInfo,
		setUserInfo
	} from 'utils/userInfo.js'

	export default {
		data() {
			return {
				form: {
					username: "admin",
					password: "admin123",
					code: null,
					uuid: null,
				},
				codeUrl: null,
				rules: {
					username: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onLoad() {
			console.log(this.codeUrl);
			let userInfo = getUserInfo();
			if(userInfo != null){
				uni.switchTab({
					url:"/pages/workbench/workbench"
				})
			}else{
				this.getCheckCode();
			}
		},
		onReady() {
			this.$refs.loginForm.setRules(this.rules);
		},
		methods: {
			submit() {
				let _this = this;
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						login(_this.form).then(res => {
							_this.$store.commit('updateToken', res.token);
							setToken(res.token);
							getInfo().then(res => {
								console.log(res);
								if (res.code == 200) {
									setUserInfo({
										permissions: res.permissions,
										roles: res.roles,
										user: res.user,
									});
									
									_this.showToast(res.user);
									uni.switchTab({
										url:"/pages/workbench/workbench"
									});
								}
							});
							
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			getCheckCode() {
				getCodeImg().then(res => {
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.form.uuid = res.uuid;
				});
			},
			showToast() {
				this.$refs.uToast.show({
					title: '登录成功',
					type: 'success',
					isTab:true,
					url: '/pages/workbench/workbench'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
